<!DOCTYPE html>
<html lang="en">
<head>
    <title>ASP.NET Web API</title>
    <script src="../../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../../Scripts/Custom/mapApiHomeScripts.js" type="text/javascript"></script>
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyA5xKr0zNln3zn8A29h0Eic6MkOunYvaec&sensor=false&v=3.8" type="text/javascript"></script>
    <script type="text/javascript">       

        $(document).ready(function () {


            // Send an AJAX request
            $.getJSON("sivx/products/",
            function (data) {                
                // On success, 'data' contains a list of products.
                $.each(data, function (key, val) {
                    // Format the text to display.
                    var str = val.Name + ': $' + val.Price;

                    // Add a list item for the product.
                    $('<li/>', { html: str }).appendTo($('#products'));
                });
            });

            /*
            var product = { Name: "q", Price: "w", Id: "e" };            
            $.post("home/save", product, 
            function (data) {                
                var message = data.Message;
                alert('msg:' + message);
                $("#product").html(message);
            });
            */
        });

        function find() {
            var id = $('#prodId').val();
            $.getJSON("sivx/products/" + id,
                function (data) {                   
                    var str = data.Name + ': $' + data.Price;                    
                    $('#product').html(str);
                })
            .fail(
                function (jqXHR, textStatus, err) {
                    alert('fails');
                    $('#product').html('Error: ' + err);
                });            
        }     

        function getProduct() {            
            return (name == "") ? null : { Name: "", Price: "", Id: "" };
        }
    </script>
</head>
<body onload="initialize();">
    <div>
        <h1>Sivx Events Menu</h1>
        <ul>
        <li>New Invites</li>
        <li>Available Invites</li>
        <li><a href="#" onclick="find();">Public Events</a></li>
        <li>Create Event</li>
        <li>Events I Own</li>
        </ul>
        <div id="map" style="width: 400px; height: 400px"></div>
        <ul id='products' />
    </div>
    <div>
        <label for="prodId">ID:</label>
        <input type="text" id="prodId" size="5"/>
        <input type="button" value="Search" onclick="find();" />
        <p id="product" />
    </div>
</body>
</html>